import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_myshop/common/constant.dart';
import 'package:flutter_myshop/common/widget.dart';
import 'package:flutter_myshop/model/good_detail.dart';
import 'package:flutter_myshop/provide/applicaiton.dart';
import 'package:flutter_myshop/service/service_method.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_myshop/provide/shoping_car.dart';
import 'package:provide/provide.dart';

/// build
class DetailsPage extends StatelessWidget {
  /// 存储信息
  // 商品Id
  final String goodId;
  // 商品信息
  GoodDetailModel goodDetailModel;

  DetailsPage(this.goodId);

  @override
  //main
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品详细页"),
      ),
      body: Container(
        child: FutureBuilder(
          future: getGoodDetail(id: goodId),
          builder: (context, response) {
            // 拿到数据
            if (response.hasData) {
              // 对数据进行校验,数据为空
              if (response.data['data'] == null) {
                throw Exception("得到的商品详情为空,请检查后台接口.....");
              }
              // 存储数据
              goodDetailModel = GoodDetailModel.fromJson(response.data['data']);
              return Container(
                color: Colors.black12,
                child: Stack(
                  children: <Widget>[
                    ListView(
                      scrollDirection: Axis.vertical,
                      children: <Widget>[
                        // 商品信息
                        _goodInfoWidget(),
                        // 说明
                        _descriptionWidget(),
                        // tab
                        HorizontalTab(
                          strList: ["详情", "评论"],
                          widgetList: <Widget>[
                            Html(data: goodDetailModel.good.description),
                            Text("评论页面"),
                          ],
                        ),
                      ],
                    ),
                    _buttomBar(context),
                  ],
                ),
              );
            }
            // 未拿到数据
            else {
              return waitWidget;
            }
          },
        ),
      ),
    );
  }

  /// 展示组件
  //  商品信息展示
  Widget _goodInfoWidget() {
    Good good = goodDetailModel.good;
    return Container(
      height: ScreenUtil().setHeight(350),
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Expanded(
            child: Image.network(
              good.image,
              fit: BoxFit.fill,
            ),
          ),
          // 名字
          Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.all(
              ScreenUtil().setHeight(5),
            ),
            child: Text(
              good.name,
              style: TextStyle(fontSize: ScreenUtil().setSp(13)),
            ),
          ),
          // 编号
          Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.all(
              ScreenUtil().setHeight(5),
            ),
            child: Text(
              "编号:${good.id}",
              style: TextStyle(
                fontSize: ScreenUtil().setSp(9),
                color: Colors.black38,
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(10),
                ScreenUtil().setHeight(5), 0, ScreenUtil().setHeight(5)),
            alignment: Alignment.centerLeft,
            child: Wrap(
              // 水平距离
              spacing: ScreenUtil().setWidth(20),
              // 竖直距离
              runSpacing: ScreenUtil().setHeight(10),
              children: <Widget>[
                Text(
                  "¥${good.price}",
                  style: TextStyle(
                    fontSize: ScreenUtil().setSp(13),
                    color: Color.fromARGB(255, 234, 93, 46),
                  ),
                ),
                Text(
                  "市场价:  ",
                  style: TextStyle(fontSize: ScreenUtil().setSp(11)),
                ),
                Container(
                  padding: EdgeInsets.only(top: ScreenUtil().setHeight(3)),
                  child: Text(
                    "¥${good.noDiscountedPrice}",
                    style: TextStyle(
                      decoration: TextDecoration.lineThrough,
                      fontSize: ScreenUtil().setSp(11),
                      color: Colors.black26,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 说明区域UI
  Widget _descriptionWidget() {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(top: ScreenUtil().setHeight(7)),
      padding: EdgeInsets.all(ScreenUtil().setHeight(8)),
      child: Text(
        "说明: >急速送达>正品保证",
        style: TextStyle(
          color: Color.fromARGB(255, 204, 102, 51),
          fontSize: ScreenUtil().setSp(11),
        ),
      ),
    );
  }

  // 底部操作栏UI
  Widget _buttomBar(context) {
    return Positioned(
      top: ScreenUtil().setHeight(Constant.MAX_HEIGHT_SCREEN -
          Constant.APP_BAR_HEIGHT_SCREEN -
          32),
      child: Container(
        height: ScreenUtil().setHeight(35),
        width: ScreenUtil().setWidth(Constant.MAX_WIDTH_SCREEN),
        color: Colors.white,
        child: Row(
          children: <Widget>[
            // 购物车按钮
            Container(
              color: Colors.white,
              width: ScreenUtil().setWidth(56),
              child: InkWell(
                onTap: (){
                  // log进入购物车页面
                  print("点击进入购物车页面.......");
                  Navigator.pop(context);
                  ProviderApplication.currentIndexProvider.changeIndex(2);
                },
                child: Icon(Icons.shopping_cart),
              ),
            ),
            // 加入购物车按键
            Expanded(
              child: Container(
                padding: EdgeInsets.only(top: ScreenUtil().setHeight(6)),
                height: ScreenUtil().setHeight(35),
                color: Colors.green,
                child: InkWell(
                  onTap: () {
                    // log 加入购物车
                    print("点击加入购物车......");
                    Good good = goodDetailModel.good;
                    Provide.value<ShopingCarProvider>(context).addToCar(
                        good.id, good.name, 1, good.price, good.image);
                  },
                  child: Text(
                    "加入购物车",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.grey[400],
                      fontSize: ScreenUtil().setSp(13),
                    ),
                  ),
                ),
              ),
            ),

            // 立即购买按键
            Expanded(
              child: Container(
                padding: EdgeInsets.only(top: ScreenUtil().setHeight(6)),
                height: ScreenUtil().setHeight(35),
                color: Colors.orange[900],
                child: InkWell(
                  onTap: () {
                    print("点击立即购买........");
                    Provide.value<ShopingCarProvider>(context).clearCar();
                  },
                  child: Text(
                    "立即购买",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.grey[400],
                      fontSize: ScreenUtil().setSp(13),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
